import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { observer } from 'mobx-react';
import { Form, Input, DatePicker, Button, Table, message } from 'antd';

import { ImageUploader } from '../../../../components/ImageUploader';
import { BannerModel } from '../../../../../model/assets/standard/BannerModel';
import {CREATE_SUCCESS_REDIRECT_DELAY} from "../../../../../service/Config";

const FormItem = Form.Item;

@observer
export class BannerEditor extends React.Component<RouteComponentProps<{ id: string }, {}>, { store?: BannerModel; fileList?: any[] }> {

    constructor(props) {
        super(props);
        this.initState();
    }
    private isEditMode = this.props.route.path !== 'banner/create';

    initState() {
        let store: BannerModel;

        if (!this.isEditMode) { // 创建
            store = new BannerModel();
        }
        else { // 编辑
            store = new BannerModel(this.props.params.id);
            store.fetchData().catch(res => {
                message.error(`数据请求失败`, 2.5);
            });
        }

        this.state = {
            store,
            fileList: null
        };
    }

    onSubmit = () => {
        this.state.store.save().then(res => {
            message.success(res.message, CREATE_SUCCESS_REDIRECT_DELAY, () => {
                if (!this.isEditMode) {
                    location.href = '#/content/assets/banner/manager'
                }
            });
        }, res => {
            message.error(res.message, 2.5);
        });
    }

    onImageChange = (fileList: any[]) => {
        this.setState({ fileList });
    }

    onImageUpdate = (fileList: any[]) => {
        if (fileList.length) {
            this.state.store.data.imageUrl = fileList[0].url;
        }
        else {
            this.state.store.data.imageUrl = "";
        }
    }

    render() {
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                span: 14,
                offset: 6,
            },
        };
        var {store, fileList} = this.state;

        if (!fileList && store.data.imageUrl) {
            fileList = [
                {
                    uid: -1,
                    url: store.data.imageUrl
                }
            ];
        }

        return <Form horizontal>
            <FormItem {...formItemLayout}
                label="名称"
                required
                validateStatus={store.nameValid ? 'success' : 'error'}>
                <Input value={store.data.name} onChange={e => store.data.name = e.target['value']} />
            </FormItem>
            <FormItem {...formItemLayout}
                label="跳转链接"
                required
                validateStatus={store.urlValid ? 'success' : 'error'}>
                <Input value={store.data.url} onChange={e => store.data.url = e.target['value']} placeholder="格式:http://example.com" />
            </FormItem>
            <FormItem {...formItemLayout}
                label="图片"
                extra="图片建议尺寸：750像素*387像素，长方形"
                required
                validateStatus={store.imageUrlValid ? 'success' : 'error'}>
                <ImageUploader limit={1} onChange={this.onImageChange} fileList={fileList} onUpdate={this.onImageUpdate} />
            </FormItem>
            <FormItem {...formItemLayout} label="备注">
                <Input value={store.data.note} onChange={e => store.data.note = e.target['value']} />
            </FormItem>
            <FormItem {...tailFormItemLayout}>
                <Button type="primary" size="large" onClick={this.onSubmit} loading={store.isSubmiting} style={{ marginRight: 10 }}>保存</Button>
                <Button size="large" onClick={() => location.href = '#/content/assets/banner/manager'}>返回列表</Button>
            </FormItem>
        </Form>;
    }
}